
/* 
2024-01-10
创建虚拟 DOM 架构：首先定义如何表示和操作虚拟 DOM。
实现渲染机制：能够将虚拟 DOM 转换为真实 DOM，并处理更新。

*/
// // 创建虚拟 DOM函数
// function createElement (type, props, ...children) {
//   return { type, props: { ...props, children } }
// }
// // 实现渲染函数
// function render (element, container) {
//   // 如果是文本直接渲染
//   if (typeof element === 'string' || typeof element === 'number') {
//     container.appendChild(document.createTextNode(element))
//     return
//   }
//   // 如果是函数组件
//   if (typeof element.type === 'function') {
//     // 处理函数组件
//     const component = element.type
//     const renderedElement = component(element.props)
//     render(renderedElement, container)
//     return
//   }
//   // 如果是dom元素
//   const dom = document.createElement(element.type)

//   Object.keys(element.props)
//     .filter(key => key !== 'children')
//     .forEach(name => {
//       dom[name] = element.props[name]
//     })

//   element.props.children.forEach(child =>
//     render(child, dom)
//   )

//   container.appendChild(dom)
// }

// // 示例函数组件
// function Welcome (props) {
//   return createElement('h1', null, 'Hello, ' + props.name)
// }
// // 示例dom
// const domElement = createElement('div', { id: 'container' },
//   createElement('h1', null, 'Hello, 我是dom元素!'),
// )


// // 使用函数组件
// const element = createElement(Welcome, { name: '函数组件' })
// render(element, document.getElementById('root'))
// render(domElement, document.getElementById('root'))
// index.js
import { createElement, render, useState, useEffect } from './lib/MyReact';

function App() {
    // 使用 useState, useEffect 等
    // ...
}

// 使用自定义的 createElement 和 render
const appElement = createElement(App, null);
render(appElement, document.getElementById('root'));
